<script type="text/javascript">
<!--
{literal}
    $(document).ready(function(){
        $('#radGroupAdminButtonDiv #addNewRadGroupBtn').click(function(){
            addNewRadGroup();
        });
        $('#radGroupListTbl tbody tr:last').addClass('last');
    });
{/literal}
//-->
</script>
<div style="width: 683px;" class="form_container" id="radGroupEditDiv">
    <form name="editRadGroupFrm" id="editRadGroupFrm">
    <input type="hidden" name="radGroupId" id="radGroupId">
    <table cellpadding="5" cellspacing="0" style="width: 660px;">
        <tbody>
            <tr>
                <td colspan="5">
                   <span class="field" style="text-transform: uppercase" id="actionTitle">{translate}Add new group{/translate}</span>
                   &nbsp;&nbsp;
                   <span id="addRadGroupMsg" class="formAlertMsg"></span>
                </td>
            </tr>
            <tr>
                <td class="label" style="width: 100px;">{translate}Group name{/translate}</td>
                <td colspan="3"><input type="text" name="groupName" id="groupName" style="width: 320px;"> </td>
                <td rowspan="2" valign="bottom" align="center">
                    <div id="actionBtnDiv">
	                    <a href="javascript:saveRadGroupInfo();" title="{translate}Save{/translate}">
	                        <img src="{$base_uri}images/add.png">
	                    </a>
                    </div>
                    {include file="/rad_admin/element_loader.html"}
                </td>                    
            </tr>
            <tr>
                <td class="label">{translate}Radiology type{/translate}</td>
                <td>
                    <select name="radType" id="radTypeListLbx" style="width: 150px;">                   
                        {html_options options=$radTypeList}
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</div>
<div id="radGroupAdminButtonDiv">
    <button id="addNewRadGroupBtn">{translate}Reset{/translate}</button>
</div>

<div class="separator"></div>

<div style="width: 700px">
    <table id="radGroupListTbl" class="grid" cellpadding="0" cellspacing="0" style="width: 100%;">
        <caption style="text-transform: uppercase;">{translate}Radiology group list{/translate}</caption>
        <thead>
            <tr>
                <th class="first">{translate}Order number{/translate}</th>
                <th style="width: 450px;">{translate}Group name{/translate}</th>
                <th>{translate}Radiology type{/translate}</th>
            </tr>
        </thead>
        <tbody>
            {if !empty($groupList)}
                {foreach from=$groupList item=group}
                    <tr id="row_{$group.id}">
                        <td>{$index++}</td>
                        <td><a href="javascript:editRadGroup({$group.id})" id="groupName_{$group.id}" title="{translate}Edit{/translate}">{$group.name}</a></td>
                        <td>
                            <input type="hidden" id="radType_{$group.id}" value="{$group.enum_paraclinic_type}">
                            <span id="radTypeName_{$group.id}">{$group.enum_paraclinic_type_text}</span>
                        </td>
                    </tr>
                {/foreach} 
            {else}
                <tr><td colspan="4">{translate}There is no radiology groups{/translate}</td></tr>
            {/if}
        </tbody>
    </table>
</div>